<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US">
<head>
	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
	<title>PowerTip SVG Examples</title>
	<style type="text/css">
		.placement-examples div { text-align: center; }
	</style>
	<!-- Include jQuery and PowerTip -->
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>
	<script type="text/javascript" src="../src/core.js"></script>
	<script type="text/javascript" src="../src/csscoordinates.js"></script>
	<script type="text/javascript" src="../src/displaycontroller.js"></script>
	<script type="text/javascript" src="../src/placementcalculator.js"></script>
	<script type="text/javascript" src="../src/tooltipcontroller.js"></script>
	<script type="text/javascript" src="../src/utility.js"></script>
	<link rel="stylesheet" type="text/css" href="../css/jquery.powertip.css" />
</head>
<body>

	<h1>PowerTip SVG Examples</h1>

	<!-- Simple Placement Examples -->
	<div class="placement-examples">
		<h2>Simple Placement Examples</h2>
		<div>
			<svg width="500px" height="400px" xmlns="http://www.w3.org/2000/svg" version="1.1">
				<ellipse id="red-ellipse1" title="North placement" transform="translate(240 80) scale(2)" rx="25" ry="10" fill="white" stroke="red" stroke-width="2" />
				<ellipse id="red-ellipse2" title="East placement" transform="translate(360 200) scale(2)" rx="25" ry="10" fill="white" stroke="red" stroke-width="2" />
				<ellipse id="red-ellipse3" title="South placement" transform="translate(240 320) scale(2)" rx="25" ry="10" fill="white" stroke="red" stroke-width="2" />
				<ellipse id="red-ellipse4" title="West placement" transform="translate(120 200) scale(2)" rx="25" ry="10" fill="white" stroke="red" stroke-width="2" />
				<ellipse id="red-ellipse5-alt" title="Alt Northwest placement" transform="translate(120 80) scale(2)" rx="25" ry="10" fill="white" stroke="red" stroke-width="2" />
				<ellipse id="red-ellipse5" title="Northwest placement" transform="translate(120 140) scale(2)" rx="25" ry="10" fill="white" stroke="red" stroke-width="2" />
				<ellipse id="red-ellipse6-alt" title="Alt Northeast placement" transform="translate(360 80) scale(2)" rx="25" ry="10" fill="white" stroke="red" stroke-width="2" />
				<ellipse id="red-ellipse6" title="Northeast placement" transform="translate(360 140) scale(2)" rx="25" ry="10" fill="white" stroke="red" stroke-width="2" />
				<ellipse id="red-ellipse7-alt" title="Alt Southwest placement" transform="translate(120 320) scale(2)" rx="25" ry="10" fill="white" stroke="red" stroke-width="2" />
				<ellipse id="red-ellipse7" title="Southwest placement" transform="translate(120 260) scale(2)" rx="25" ry="10" fill="white" stroke="red" stroke-width="2" />
				<ellipse id="red-ellipse8-alt" title="Alt Southeast placement" transform="translate(360 320) scale(2)" rx="25" ry="10" fill="white" stroke="red" stroke-width="2" />
				<ellipse id="red-ellipse8" title="Southeast placement" transform="translate(360 260) scale(2)" rx="25" ry="10" fill="white" stroke="red" stroke-width="2" />
			</svg>​
		</div>
	</div>
	<script type="text/javascript">
		$(function() {
			// simple placement examples
			$('#red-ellipse1').powerTip({ placement: 'n' });
			$('#red-ellipse2').powerTip({ placement: 'e' });
			$('#red-ellipse3').powerTip({ placement: 's' });
			$('#red-ellipse4').powerTip({ placement: 'w' });
			$('#red-ellipse5').powerTip({ placement: 'nw' });
			$('#red-ellipse5-alt').powerTip({ placement: 'nw-alt' });
			$('#red-ellipse6').powerTip({ placement: 'ne' });
			$('#red-ellipse6-alt').powerTip({ placement: 'ne-alt' });
			$('#red-ellipse7').powerTip({ placement: 'sw' });
			$('#red-ellipse7-alt').powerTip({ placement: 'sw-alt' });
			$('#red-ellipse8').powerTip({ placement: 'se' });
			$('#red-ellipse8-alt').powerTip({ placement: 'se-alt' });
			$('#red-ellipse9').powerTip({ placement: 'n' });
		});
	</script>

	<!-- Complex Shape Placement Examples -->
	<div class="placement-examples">
		<h2>Complex Shape Placement Examples</h2>
		<div>
			<svg width="500px" height="400px" xmlns="http://www.w3.org/2000/svg" version="1.1">
				<path id="black-star" title="North placement" transform="translate(190,20) scale(.5)" d="M100,10 L100,10 40,180 190,60 10,60 160,180 z" stroke="black" fill="white" stroke-width="8" />
				<path id="black-line" title="East placement" d="M0,0 l 50,-25 a25,25 -30 0,1 50,-25 l 50,-25 a25,50 -30 0,1 50,-25 l 50,-25 a25,75 -30 0,1 50,-25 l 50,-25 a25,100 -30 0,1 50,-25 l 50,-25" transform="translate(200 200) scale(.5) rotate(35)" fill="none" stroke="black" stroke-width="8" />
				<path id="black-mexico" title="South placement" transform="translate(-170 80) scale(.7)" fill="white" stroke="black" stroke-width="4" d="M631.1390445811901,321.77690759874906L628.7425104969154,327.46667091140154L627.6208118045528,332.14949986078705L627.0474975487917,340.90584076528773L626.411222371781,344.10198679406136L627.4242350938447,347.6925832560501L629.2952452961199,350.91314211323913L630.4779357606378,356.02667383953155L634.5707883308241,360.9557045795793L636.012466631564,364.726271029657L638.4564937382497,367.9833685499932L645.1297965913207,369.7289993375331L647.7468324825606,372.4842801334311L653.2508209909402,370.59717198098224L658.03376094103,369.87904838004266L662.7108729482354,368.6266660930511L666.6285613831385,367.42778848964645L670.5320462498826,364.6561893904515L671.9023232223401,360.7757605104865L672.2372219610671,355.2283772751382L673.2403600779996,353.2802524846172L677.3471123542048,351.45676405614097L683.77045505175,349.75102834539916L689.198880376473,349.8061467422586L692.8726452844894,349.1190934648212L694.4145062589392,350.457710670721L694.3834338576274,353.63215775971827L691.2888367353843,357.66509021583965L690.0169705437786,361.72879939538285L691.2118756733829,362.8380499144363L690.4172805226004,365.7227335911533L689.0861634200136,370.92965382678125L687.4333458985951,369.2840863395406L686.132292210297,369.4355472718241L684.9497406459144,369.55898560454096L682.8613395072962,373.61585623830774L681.6956366569561,372.8658286627471L680.9477730322438,373.1914232647639L681.0308346945446,374.1632858119232L675.2212849367086,374.2393116044063L669.3504236081442,374.3779893679462L669.436960614539,378.103581856211L666.5851990810157,378.17340577864053L668.9879164806993,380.33924760775983L671.3647477666258,381.82194109381857L672.1032121126799,383.24247903283276L673.1396376602418,383.62206439262616L673.0345443574353,385.88187417724396L664.8810574782938,386.05861685886L661.907184383218,391.5091640197933L662.8344800785168,392.73466669551823L662.1170333250867,394.3004183051362L661.9893858259518,396.2341477664124L654.6587116782264,389.18330934403025L651.34857457773,387.05903084781596L646.1351307787214,385.36056070229466L642.578875919417,385.85236512226254L637.4570767755117,388.34623961080683L634.2370534387708,388.9908721335895L629.7417986926357,387.21994597629435L624.9791242037214,385.9190283545708L619.0801168504181,382.80850774619546L614.3427220845314,381.8066109290787L607.2556405785878,378.58846065808626L602.0790808013094,375.3005009200801L600.5518090624203,373.4926663491044L597.0578519963617,373.00080763503104L590.7472216522768,370.7091497393793L588.2882597583889,367.60598444759574L581.8188331366152,363.6106035826688L578.9668516015977,359.32701745667555L577.6983972185706,356.055797038782L579.7792355866999,355.4996067845068L579.2636988072874,353.59717630694126L580.7712004969587,351.949832199576L580.9400920559212,349.67869040010953L579.0773657876555,346.6454951065124L578.7031500924621,344.0128293768203L576.9086266115761,340.6196055863277L572.1236229273595,333.88087232182323L566.5990556767756,328.49242616458343L564.1175301553972,324.28873798383063L559.3743629801547,321.3579613286737L558.4730632348299,319.71347776814986L559.7828744399674,315.7705693303957L557.0130107479456,314.0899913253245L553.9965781575432,310.74940281863144L553.1275368383943,306.17621152528807L550.1522722953059,305.4539304000365L547.3367156935035,301.8589740419552L545.156914315976,298.56820887268674L545.202776785345,296.56046643612103L542.9553639183637,291.5514885640763L541.7869238953259,286.561880327189L542.2633435467933,284.1465746161625L538.7850981555159,281.3482577190073L536.9467274491565,281.4779402230709L534.207176611834,279.4978847364272L532.8882330402218,281.9738199844406L533.2337118906858,285.0673077112945L532.9324932726461,289.8518564165232L534.3562948402142,292.6168205215481L537.7224307332845,297.31916802423376L538.4013194215817,298.8899169821898L539.1741782219033,299.41006316747126L539.5780859328158,301.6585183396906L540.5805532154267,301.64467698603903L541.1061291948972,305.85545508762675L542.5842214126475,307.6125883452066L543.4758954615678,309.97364802510515L546.615230780609,313.5004565841785L547.773831850082,319.6356038778383L549.152213621287,322.5856311231764L550.4179115591285,325.73038943485597L550.3610816658995,329.17772386689614L553.1570338832397,329.57225265264253L555.2069477468797,332.67556725941415L557.0614434430345,335.7154957966069L556.8060376757528,336.87590403420734L554.0830136185281,339.1249745814687L553.0364901327397,339.0289279171859L551.8762551236989,334.9631141552424L548.4300132572291,331.00137135116995L544.5865312007193,327.5733659167719L541.8226210249395,325.71550391505775L542.5980298586001,320.98774531869435L542.1744010081454,317.42230182883293L539.7231010207054,315.22300801192836L536.2298780480326,312.0529810651485L535.3674555182844,312.8232468556312L534.189113585834,311.03491137861454L530.9646504497667,309.2004789021218L528.2670231375715,305.2040030226232L528.7479058475299,304.7553147592322L530.9742474520464,305.3097853591944L533.4058713645187,303.0891122523842L534.0636418652416,300.22507436008135L530.5764914192205,295.3334537412645L527.6844112784197,293.3012156569457L526.3993951477198,289.1721929728734L525.1829461167747,284.857718964437L523.7058936225004,279.61248457942827L522.7283821408085,273.79308947791975L528.7597524049012,273.8611427033097L535.5658515064348,273.7633490780404L534.842840200872,274.94161385333376L542.332616036849,278.62809944309123L553.978661493946,283.9391642891652L564.8964829735426,284.56992373906445L569.2740717650157,284.8122351861094L569.5967881973443,282.2118800379874L579.1624101641775,282.69385331269666L580.9593548551809,285.0227077680054L583.6194320282688,287.1453916722559L586.7025605932887,290.0691997476095L588.2947705593623,293.4604381398942L589.4269679800892,297.0163617821147L592.2341545711794,299.0515411364024L596.8652054708068,301.12931964832967L600.7976648443041,296.1915577839659L605.4821545712327,296.1956772871066L609.3989168214237,298.837356652771L612.1029705804516,303.28198274539034L613.9647623475516,307.08490661039446L617.2881769125493,310.8152578907807L618.4442960953867,315.3546888997947L620.0162300553352,318.4205644922635L624.6038462022742,320.4879252935987L628.80989086392,321.9550962518425Z" />
				<g id="black-group" title="West placement" transform="translate(120 200) scale(2)" stroke="black" fill="white" stroke-width="2">
					<circle r="5" transform="translate(-10,-15)" />
					<circle r="5" transform="translate(-15,0)" />
					<circle r="10" transform="translate(-5,5)" />
					<circle r="5" transform="translate(15,5)" />
					<circle r="5" transform="translate(10,-5)" />
				</g>
				<circle id="black-circle" title="Northwest placement" transform="translate(120 80) scale(2)" r="20" fill="white" stroke="black" stroke-width="2" />
				<rect id="black-rect" title="Northeast placement" transform="translate(320 50) scale(2)" width="40" height="30" fill="white" stroke="black" stroke-width="2" />
				<polygon id="black-polygon" title="Southwest placement" transform="translate(-220 230) scale(.4)" fill="white" stroke="black" stroke-width="10" points="850,75 958,137.5 958,262.5 850,325 742,262.6 742,137.5" />
				<text id="black-text" title="Southeast placement" transform="translate(360 320) scale(2)" fill="black">Text</text>
			</svg>​
		</div>
	</div>
	<script type="text/javascript">
		$(function() {
			// complex shape placement examples
			$('#black-star').powerTip({ placement: 'n' });
			$('#black-line').powerTip({ placement: 'e' });
			$('#black-mexico').powerTip({ placement: 's' });
			$('#black-group').powerTip({ placement: 'w' });
			$('#black-circle').powerTip({ placement: 'nw' });
			$('#black-rect').powerTip({ placement: 'ne' });
			$('#black-polygon').powerTip({ placement: 'sw' });
			$('#black-text').powerTip({ placement: 'se' });
		});
	</script>

	<!-- Rotation Placement Examples -->
	<div class="placement-examples">
		<h2>Rotation Placement Examples</h2>
		<div>
			<svg width="500px" height="400px" xmlns="http://www.w3.org/2000/svg" version="1.1">
				<ellipse id="blue-ellipse1" title="Northwest placement" transform="translate(120 80) rotate(10) scale(2)" rx="25" ry="10" fill="white" stroke="blue" stroke-width="2" />
				<ellipse id="blue-ellipse2" title="North placement" transform="translate(240 80) rotate(30) scale(2)" rx="25" ry="10" fill="white" stroke="blue" stroke-width="2" />
				<ellipse id="blue-ellipse3" title="Northeast placement" transform="translate(360 80) rotate(60) scale(2)" rx="25" ry="10" fill="white" stroke="blue" stroke-width="2" />
				<ellipse id="blue-ellipse4" title="West placement" transform="translate(100 200) rotate(90) scale(2)" rx="25" ry="10" fill="white" stroke="blue" stroke-width="2" />
				<ellipse id="blue-ellipse5" title="Mouse-follow" transform="translate(220 200) rotate(120) scale(2)" rx="25" ry="10" fill="white" stroke="blue" stroke-width="2" />
				<ellipse id="blue-ellipse6" title="East placement" transform="translate(360 200) rotate(150) scale(2)" rx="25" ry="10" fill="white" stroke="blue" stroke-width="2" />
				<ellipse id="blue-ellipse7" title="Southwest placement" transform="translate(100 320) rotate(-30) scale(2)" rx="25" ry="10" fill="white" stroke="blue" stroke-width="2" />
				<ellipse id="blue-ellipse8" title="South placement" transform="translate(220 320) rotate(-45) scale(2)" rx="25" ry="10" fill="white" stroke="blue" stroke-width="2" />
				<ellipse id="blue-ellipse9" title="Southeast placement" transform="translate(360 320) rotate(-150) scale(2)" rx="25" ry="10" fill="white" stroke="blue" stroke-width="2" />
			</svg>​
		</div>
	</div>
	<script type="text/javascript">
		$(function() {
			// rotation placement examples
			$('#blue-ellipse1').powerTip({ placement: 'nw' });
			$('#blue-ellipse2').powerTip({ placement: 'n' });
			$('#blue-ellipse3').powerTip({ placement: 'ne' });
			$('#blue-ellipse4').powerTip({ placement: 'w' });
			$('#blue-ellipse5').powerTip({ followMouse: true });
			$('#blue-ellipse6').powerTip({ placement: 'e' });
			$('#blue-ellipse7').powerTip({ placement: 'sw' });
			$('#blue-ellipse8').powerTip({ placement: 's' });
			$('#blue-ellipse9').powerTip({ placement: 'se' });
		});
	</script>

</body>
</html>
